<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Bootstrap Table</title>
    <link href="../static/css/bootstrap.min.css" rel="stylesheet" />
    <link href="../static/css/bootstrap-table.min.css" rel="stylesheet" />
    <script src="../static/js/jquery-3.5.1.min.js"></script>
    <script src="../static/js/bootstrap.min.js"></script>
    <script src="../static/js/bootstrap-table.min.js"></script>
    <!-- <script src="lib/bootstrap-table/locale/bootstrap-table-zh-CN.min.js"></script> -->
</head>
<body>
    <div style="margin:100px auto;width:1000px;">
        <table id="table"></table>
    </div>

    <div class="modal fade" id="editModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content"> 
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h4 class="modal-title" id="myModalLabel">编辑</h4>
                </div>
                <div class="modal-body">
                    <div class="form-group">
                        <label for="id">编号</label>
                        <input id="id" type="text" class="form-control" disabled />
                    </div>
                    <div class="form-group">
                        <label for="username">用户名</label>
                        <input id="username" type="text" class="form-control" />
                    </div>
                    <div class="form-group">
                        <label for="password">密码</label>
                        <input id="password" type="text" class="form-control" />
                    </div>
                    <div class="form-group">
                        <label for="school">学校</label>
                        <input id="school" type="text" class="form-control" />
                    </div>
                    <div class="form-group">
                        <label for="course">课程</label>
                        <input id="course" type="text" class="form-control" />
                    </div>
                    <div class="form-group">
                        <label for="cookie">cookie</label>
                        <input id="cookie" type="text" class="form-control" />
                    </div>
                    <div class="form-group">
                        <label for="state">状态</label>
                        <input id="state" type="text" class="form-control" />
                    </div>
                    <div class="form-group">
                        <label for="key">卡密</label>
                        <input id="key" type="text" class="form-control" />
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button type="button" class="btn btn-primary" onclick="editInfo()">修改</button>
                </div>
            </div>
        </div>
    </div>

    <script>
        $('#table').bootstrapTable({
            url: "/userall",                         // URL
            method: "post",                                        // 请求类型
            contentType: "application/x-www-form-urlencoded",      // post请求必须要有，否则后台接受不到参数
            sidePagination: "server",                              // 设置在服务端还是客户端分页
            showRefresh: false,                                    // 是否刷新按钮
            sortStable: true,                                      // 是否支持排序
            cache: false,                                          // 是否使用缓存
            pagination: false,                                      // 是否显示分页
            search: false,                                         // 是否有搜索框
            clickToSelect: true,                                   // 是否点击选中行
            pageNumber: 1,                                         // 首页页码，默认为1
            pageSize: 10,                                           // 页面数据条数
            pageList: [10, 20, 30],
            queryParamsType: "",
            queryParams: function (params) {
                return {
                    pageSize: params.pageSize,                     // 每页记录条数
                    pageNumber: params.pageNumber,                 // 当前页索引
                };
            },
            columns: [{
                field: 'id',
                title: '编号',
                align: "center",
                halign: "center",
                valign: 'middle',
                sortable: true
            },
            {
                field: 'username',
                title: '用户名',
                align: "center",
                halign: "center",
                valign: 'middle'
            },
            {
                field: 'password',
                title: '密码',
                align: "center",
                halign: "center",
                valign: 'middle'
            },
            {
                field: 'school',
                title: '学校',
                align: "center",
                halign: "center",
                valign: 'middle'
            },
            {
                field: 'course',
                title: '课程',
                align: "center",
                halign: "center",
                valign: 'middle'
            },
            {
                field: 'cookie',
                title: 'cookie',
                align: "center",
                halign: "center",
                valign: 'middle'
            },
            {
                field: 'state',
                title: '状态',
                align: "center",
                halign: "center",
                valign: 'middle'
            },
            {
                field: 'key',
                title: '卡密',
                align: "center",
                halign: "center",
                valign: 'middle'
            },
            {
                field: 'operate',
                title: '操作',
                align: 'center',
                valign: 'middle',
                width: 200,
                events: {
                    'click #edit': function (e, value, row, index) {
                        $('#id').val(row.id);
                        $('#username').val(row.username);
                        $('#password').val(row.password);
                        $('#school').val(row.school);
                        $('#course').val(row.course);
                        $('#cookie').val(row.cookie);
                        $('#state').val(row.state);
                        $('#key').val(row.key);
                    },
                    'click #delete': function (e, value, row, index) {
                        deleteInfo(row.Id);
                    }
                },
                formatter: function (value, row, index) {
                    console.log(row);
                    var result = "";
                    result += '<button id="edit" class="btn btn-info" data-toggle="modal" data-target="#editModal">编辑</button>';
                    result += '<button id="delete" class="btn btn-danger" style="margin-left:10px;">删除</button>';
                    return result;
                }
            }]
        })

        // 修改信息
        function editInfo() {
            $.ajax({
                type: 'post',
                url: 'ashx/EditHandler.ashx',
                dataType: 'json',
                data: {
                    id: $('#id').val(),
                    username: $('#username').val(),
                    password: $('#password').val(),
                    school: $('#school').val(),
                    course: $('#course').val(),
                    cookie: $('#cookie').val(),
                    state: $('#state').val(),
                    key: $('#key').val()
                },
                success: function (data) {
                    if (data == 'Yes') {
                        $('#table').bootstrapTable('refresh');
                        $('#editModal').modal('hide');
                    }
                    else {
                        alert('修改失败');
                    }
                }
            })
        }

        // 删除信息
        function deleteInfo(id) {
            $.ajax({
                type: 'post',
                url: 'ashx/DeleteHandler.ashx',
                dataType: 'json',
                data: {
                    id: id
                },
                success: function (data) {
                    if (data == 'Yes') {
                        $('#table').bootstrapTable('refresh');
                    }
                    else {
                        alert('删除失败');
                    }
                }
            })
        }
    </script>
</body>
</html>
